<script setup lang="ts">
import type { Ref } from 'vue'
import type { CodeMateModel } from '@/apis/code/codeMateApi'
import { storeToRefs } from 'pinia'
import { computed, inject, onMounted } from 'vue'
import { useDictStore } from '@/stores/dictStore'

const type = defineModel<string>('type')
const modelId = defineModel<number>('modelId')
const isList = defineModel<boolean>('isList')

const models = inject<Ref<CodeMateModel[]>>('models')

const dictStore = useDictStore()
const { dictMap } = storeToRefs(dictStore)

onMounted(async () => {
  await dictStore.loadDict('ENUM_CODE_MATE_FIELD_TYPE')
})

const showTitle = computed(() => {
  if (modelId.value !== undefined) {
    const model = models?.value?.find(t => t.id === modelId.value)
    if (model !== undefined) {
      return {
        title: isList.value ? `${model.remark}列表` : model.remark,
        name: isList.value ? `List<${model.name}>` : model.name,
      }
    }
  }
  else {
    const filedType = dictMap.value.ENUM_CODE_MATE_FIELD_TYPE?.find(t => t.dictCode === type.value)
    if (filedType) {
      return {
        title: isList.value ? `${filedType.dictName}列表` : filedType.dictName,
        name: isList.value ? `List<${filedType.dictCode as string}>` : filedType.dictCode,
      }
    }
  }
  return undefined
})
</script>

<template>
  <div v-if="showTitle !== undefined" class="flex items-center justify-center gap-2">
    <span>{{ showTitle.title }} </span>
    <span class="text-xs text-secondary">{{ showTitle.name }}</span>
  </div>
</template>
